import React, { Component } from "react";
import { Tabs, Button } from "antd";
import { connect } from "dva";
import styles from "./TemplateCenter.less";
import TemplateContent from "./TemplateContent";

const { TabPane } = Tabs;

@connect(store => ({
  templateList: store.templateCenter
}))
export default class TemplateCenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
    this.type = ["mobile", "PC", "PAD"];
  }

  importDemo = () => {};

  componentDidMount() {
    this.init("mobile");
  }

  init = () => {
    const { dispatch } = this.props;
    const obj = {
      pageIndex: "1",
      pageSize: "10"
      // topic: type
    };
    dispatch({
      type: "templateCenter/msgTemplateQuery",
      payload: obj
    });
  };

  changeTab() {
    // const type = this.type[key - 1];
    this.init();
  }

  importDemoBtn() {
    return (
      <Button
        type="primary"
        onClick={() => {
          this.importDemo();
        }}
      >
        导入模板
      </Button>
    );
  }

  render() {
    return (
      <div className={styles.root}>
        <h2>模板中心</h2>
        <Tabs
          tabBarExtraContent={this.importDemoBtn()}
          onChange={() => {
            this.changeTab();
          }}
        >
          <TabPane tab="全部模板" key="1">
            <TemplateContent
              data={this.props.templateList}
              // type={this.type[0]}
            />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
